<template>
  <div class="home-sale-card">
    <div class="sale-card-header">
      <span class="title">{{ title }}</span>
      <div v-if="showDate" class="date-select">
        <el-select v-model="date" @change="handleChangeDate">
          <el-option v-for="d in dateTypes" :key="d.value" :value="d.value" :label="d.label" />
        </el-select>
      </div>
    </div>
    <div class="sale-card-content">
      <div class="sale-card-item">
        <span class="card-num">{{ data.yearGrowth|formatProportion }}</span>
        <span class="card-title">同比增长</span>
      </div>
      <div class="sale-card-item ">
        <span v-if="ismoney" class="card-num" @click="gotoList(data.amount)">{{ data.amount | moneyFormat }}</span>
        <span v-else class="card-num" @click="gotoList(data.num)">{{ data.num }}</span>
        <span class="card-title">{{ name }}</span>
      </div>
      <div class="sale-card-item">
        <span class="card-num">{{ data.monthGrowth|formatProportion }}</span>
        <span class="card-title">环比增长</span>
      </div>
    </div>
  </div>
</template>
<script>
import { dateTypes } from '@/utils/enums'
// import { setParams } from '@/utils/jump'
export default {
  name: 'SaleCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    path: {
      type: String,
      default: ''
    },
    ismoney: {
      type: Boolean,
      default: false

    },
    showDate: {
      type: Boolean,
      default: true
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }

  },
  data() {
    return {
      dateTypes,
      date: 7
    }
  },
  methods: {
    handleChangeDate(v) {
      this.$emit('change', v)
    },
    gotoList(v) {
      console.log(v)
      if (!v || v === '-') {
        return
      }
      // setParams({ dateType: this.date })
      const query = { dateType: this.date, searchTimeFlag: 2 }
      if (this.path === 'chance') {
        query.saleStage = 5
        // delete query.searchTimeFlag
      }
      if (this.path === 'contract' || this.path === 'payment') {
        query.status = 3
      }
      if (this.path === 'customer') {
        query.status = 1
      }
      this.gotoMainPage(this.path, query)
    }
  }
}
</script>
